<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>
<!--
    {{}} 语法可是编写表达式  一般用于简答的数据处理
    {{info.split('').reverse().join('')}}
    模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

    为什么要在插值语法中写复杂的表达式：
       1. data中的提供的数据不能直接满足使用要求
    解决方案：
        1.自定函数    {{自定义函数}}   只要使用 则函数就会被执行   没有缓存
        2.计算属性   {{计算属性名}}    多次使用只会调用一次计算属性   有缓存    如果参与计算的属性发生改变 则会重新计算
-->

<div id="app">
    <p>info:{{ info }}</p>
    <input type="text" v-model="info">
    <p>reverseInfo:{{ info.split('').reverse().join('') }}</p>
    <hr>
    <p>reverseInfo2:{{ reverseInfo() }}</p>
    <p>reverseInfo2:{{ reverseInfo() }}</p>

    <hr>
    <p>reverseInfo3:{{ reverseInfo3 }}</p>
    <p>reverseInfo3:{{ reverseInfo3 }}</p>
</div>

<script>

    // let  str = "hello"
    // let strings = str.split("");
    // console.log(JSON.stringify(strings))
    // strings = strings.reverse();
    // console.log(JSON.stringify(strings))
    // strings = strings.join('')
    // console.log(strings)

    let vm = new Vue({
        el: '#app',
        data: {
            info: 'hello vue'
        },
        methods: {
            reverseInfo() {
                console.log("reverseInfo()")
                return this.info.split('').reverse().join('')
            }
        },
        computed: {  //  计算属性
            // reverseInfo3: function () {
            //     console.log("reverseInfo3()")
            //     return this.info.split('').reverse().join('')
            // }
            reverseInfo3() {
                console.log("reverseInfo3()")
                return this.info.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>